<template>
  <div class="showDialog">
    <el-dialog title="Login History" width="30%" :visible.sync="showDialog" :showLoginHistory="showLoginHistory" @close="$emit('update:showLoginHistory', false)">
     <div>
        <el-table class="text-center table-responsive" thead-class="table-red" tbody-class="tbody-red" :hover="true" :striped="true" :small="false" :fixed="false" responsive="sm" 
                empty-filtered-text="There are no records matching your request" empty-text="There are no records to show" :data="cardLoginHistory">
                <el-table-column label="Card ID" width="150">
                    <template>{{cardName}}</template>
                </el-table-column>
                <el-table-column prop="login_time" label="Login Time" width="170"></el-table-column>
                <el-table-column prop="logout_time" label="Logout Time" width="170"></el-table-column>
        </el-table>
         <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="cardLoginHistory.total_count">
      </el-pagination>
    </div>
      </div>
      <br>
    <el-button @click="showDialog = false">{{$t('cards.close')}}</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { getCardLoginHistory } from '@/api/cards'

export default {
    name: 'UserSet',
    data() {
      return {
        showDialog: this.showLoginHistory,
        cardLoginHistory: [],
        cardid: '',
        q: {$size: 30, $page: 1, card_id: null, $orderby: '-login_time'}
      }
    },
    methods: {
    handleSizeChange (val) {
      this.q.$size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.q.$page = val
      this.getList()
    }
    },
    watch: {
      
    },
    computed: {
  
    },
    props: {
      showLoginHistory: {
           default: false
        },
        cardId: {
              type: Number
        },
        cardName: {
          type: String
        }
    },
    created(){
        if(this.cardId){
            this.q.card_id = this.cardId.toString()
              let params = Object.assign({
              $orderby: '-updated_at'
        }, this.q)
          getCardLoginHistory(params).then(res => {
          if (res.status === 0) {
          this.listLoading = false
          this.cardLoginHistory = res.data.list
            }
         })
        }
    }
}
</script>
